<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
				 	<el-input  placeholder="请输入产品名称" v-model="filters.productName"  style="width:180px;" clearable ></el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="filters.useType" placeholder="请选择产品状态" style="width:150px;" clearable>
						<el-option v-for="(item, index) in useTypeOptions" :key="index" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getProducts">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="tableData" highlight-current-row v-loading="listLoading" style="width: 100%;">
			<el-table-column type="index" label="序号" width="60" fixed>
				<template slot-scope="scope">   
                    {{pageSize*(nowPage-1)+scope.$index+1}}
                </template>
			</el-table-column>
			<el-table-column prop="productName" label="产品名称" width="350" align='center' >
			</el-table-column>
			<el-table-column prop="userType" label="产品状态" width="150" align='center' >
				<template slot-scope="scope">
					{{scope.row.useType==0?"停用":scope.row.useType==1?"购买":"试用"}}
				</template>
			</el-table-column>
			<el-table-column prop="productDate" label="产品有效期" width="250" align='center' >
				<template slot-scope="scope">
                    {{scope.row.useType==null?'无':scope.row.startDate+'至'+scope.row.endDate}}
                </template>
			</el-table-column>
			<el-table-column label="操作" width="100" align='center' fixed="right">
				<template slot-scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">更新</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="text-align: center; ">
			</el-pagination>
		</el-col>

		<!--编辑界面-->
		<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false" :before-close="closeDialog" :append-to-body="true" v-loading="editLoading">
			<el-form :model="productForm" label-width="120px" :rules="productRules" ref="productForm">
				<el-form-item label="产品" prop="productName">
					{{productForm.productName}}
				</el-form-item>
				<el-form-item label="产品状态" prop="useType">
					<el-select v-model="productForm.useType" placeholder="请选择产品状态" style="width:150px;">
						<el-option v-for="(item, index) in useTypeOptions" :key="index" :label="item.label" :value="item.value"
        						:disabled="item.disabled"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="日期范围" prop="productDate">
					<el-date-picker type="daterange" v-model="productForm.productDate" format="yyyy-MM-dd"
					value-format="yyyy-MM-dd" :style="{width: '80%'}" start-placeholder="开始日期" end-placeholder="结束日期"
					range-separator="至" @input="dateClick" clearable></el-date-picker>
				</el-form-item>			
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="closeDialog">取消</el-button>
				<el-button type="primary" @click="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false" :before-close="closeDialog" :append-to-body="true" v-loading="addLoading">
			<el-form :model="productForm" label-width="120px" :rules="productRules" ref="productForm">
				<el-form-item label="产品" prop="productId">
					<el-select v-model="productForm.productId" placeholder="请选择产品" style="float:left;width:77%;">
						<el-option v-for="(item,index) in productList" :key="index" :label="item.productName" :value="item.productId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="产品状态" prop="useType">
					<el-select v-model="productForm.useType" placeholder="请选择产品状态" style="width:150px;" @change="change()">
						 <el-option v-for="(item, index) in useTypeOptions" :key="index" :label="item.label" :value="item.value"
        						:disabled="item.disabled"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="日期范围" prop="productDate">
					<el-date-picker type="daterange" v-model="productForm.productDate" format="yyyy-MM-dd"
					value-format="yyyy-MM-dd" :style="{width: '80%'}" start-placeholder="开始日期" end-placeholder="结束日期"
					range-separator="至" clearable></el-date-picker>
				</el-form-item>			
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="closeDialog">取消</el-button>
				<el-button type="primary" @click="editSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>

	</section>
</template>

<script>
	import util from '../../common/js/util'
	import { SysApi } from '@/api/index'

	export default {
		data() {
			var isInteger = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('输入不可以为空'));
				}
				setTimeout(() => {
					if (!Number(value)) {
						callback(new Error('请输入正整数'));
					} else {
						const re = /^[0-9]*[1-9][0-9]*$/;
						const rsCheck = re.test(value);
						if (!rsCheck) {
							callback(new Error('请输入正整数'));
						} else {
							callback();
						}
					}
				}, 1000);
			}
			return {
				filters: {
					productName: '',
					useType: '',
				},
				tableData: [],
				productList: [],
				total: 0,
				schoolName: '',
				schoolId: '',
				listLoading: true,

				//产品名称信息表单
				productForm: {
					useType: '',
					productName: '',
					productId: '',
					startDate: '',
					endDate: ''
				},

				editType: '',

				editFormVisible: false,//编辑界面是否显示
				editLoading: false,

				addFormVisible: false,//新增界面是否显示
				addLoading: false,

				useTypeOptions: [{
					"label": "购买",
					"value": 1
				}, {
					"label": "试用",
					"value": 2
				}],

				productRules: { //产品名称信息表单验证
					productId: [
						{ required: true,  message: '请选择产品', trigger: 'blur'},
						{ validator: isInteger, trigger:  ['blur','change'] }
					],
					useType: [
						{ required: true,  message: '请选择产品状态', trigger: 'blur'},
						{ validator: isInteger, trigger:  ['blur','change'] }
					],
					productDate: [
						{ required: true, message: '请选择有效期范围' , trigger: ['blur','change'] }

					]
            },
            pageSize:10,
            nowPage:1,

			}
		},
		created(){
	
			//获取路由参数
			this.schoolName = this.$route.params.schoolName;
			this.schoolId = this.$route.params.schoolId
			this.getProducts();
			this.getProductList();

		},
		mounted() {
			this.getProducts();
		},
		methods: {
			change(){
				this.$forceUpdate()
			},
			handleCurrentChange(val) {
				this.nowPage = val;
				this.getProducts();
			},
			//获取产品列表
			getProductList(){
				let params = {
					schoolId: this.schoolId
				};
				SysApi.getSelectProductList(params, res => {
					this.productList = res;
				}, (errorType, error) => {
				})
			},
			//获取学校产品列表
			getProducts() {
				let params = {
					pageNum: this.nowPage,
					pageSize: this.pageSize,
					schoolId: this.schoolId,
					productName: this.filters.productName,
					useType: this.filters.useType

				};
				this.listLoading = true;
				
				SysApi.getAllSchoolProductListPage(params,res =>{
					this.total = res.total;
					this.tableData = res.list;
					this.listLoading = false;
				}, (errorType, error) => {
					this.listLoading = false;
				})


			},
			//显示编辑界面
			handleEdit: function (index, row) {
				this.editType = "编辑";
				this.editLoading = true;
				//this.productForm = Object.assign({}, row);
				this.productForm.productId =  row.productId;
				this.productForm.productName =  row.productName;
				this.productForm.useType =  row.useType;
				this.$set( this.productForm, "productDate", [
					row.startDate,row.endDate
				]);
				this.editFormVisible = true;
				this.editLoading = false;
				
			},
			//显示新增界面
			handleAdd: function () {
				this.editType = "新增";
				this.addLoading = true;

				this.productForm.productId =  '';
				this.productForm.productName =  '';
				this.productForm.useType =  '';
				this.$set( this.productForm, "productDate", ['','']);

				this.addFormVisible = true;
				this.addLoading = false;
		
			},
			//编辑
			editSubmit: function () {
				this.$refs.productForm.validate((valid) => {
					if (valid) {
							
							//let params = Object.assign({}, this.productForm);
							let params = {
								schoolId: this.schoolId,
								productId: this.productForm.productId,
								useType: this.productForm.useType,
								startDate: this.productForm.productDate[0],
                        		endDate: this.productForm.productDate[1]
							};

							SysApi.saveSchoolProduct(params,res =>{
								this.listLoading = false;
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['productForm'].resetFields();
								this.editFormVisible = false;
								this.addFormVisible = false;
								this.getProducts();
							}, (errorType, error) => {
								this.$message({type: 'error', message: '提交失败!'})
								// console.log("error=");
								// console.log(error);
	
							})
							
					}
				});
			},
			closeDialog: function () {
				
				this.$refs['productForm'].resetFields();
				this.editFormVisible = false;
				this.addFormVisible = false;
			},
			dateClick(e) {
				this.$nextTick(() => {
					this.$set(this.productForm, "productDate", [e[0], e[1]]);
				});
			}

		},
		
	}

</script>

<style>
.el-table >.el-table__fixed {
    height: 100% !important; 
  }
.el-table >.el-table__fixed-right {
    height: 100% !important; 
  }
.el-table--scrollable-x .el-table__body-wrapper {
    z-index: 1;
  }
</style>